
{{ extend './layout/main.html' }}

{{ block 'content' }}
<div class="container">
    <form id="form" method="post">
        <div class="form-group">
            <label for="">歌曲标题</label>
            <input type="text" name="title" class="form-control" placeholder="请输入歌曲标题">
        </div>
        <div class="form-group">
            <label for="">歌曲时长</label>
            <input type="text" name="time" class="form-control" placeholder="请输入歌曲时长">
        </div>
        <div class="form-group">
            <label for="">歌手</label>
            <input type="text" name="singer" class="form-control" placeholder="请输入歌手姓名">
        </div>
        <div class="form-group">
            <label for="">歌曲文件</label>
            <input type="file" name="file">
            <p class="help-block">请上传歌曲文件.</p>
        </div>
        <div class="form-group">
            <label for="">歌词文件</label>
            <input type="file" name="filelrc">
            <p class="help-block">请上传歌词文件.</p>
        </div>
        <button type="submit" class="btn btn-success">点击添加</button>
    </form>
</div>

<script type="text/javascript">
    $('form').on('submit', function(e) {
        e.preventDefault();

        // 获取所有的 input 
        var inputs = document.querySelectorAll('input');

        var formData = new FormData();
        formData.append('title', inputs[0].value);
        formData.append('time', inputs[1].value);
        formData.append('singer', inputs[2].value);

        // 传递文件的方式:  文件对象    坑：原生 DOM 的属性， jQ上没有该属性
        formData.append('file', inputs[3].files[0]);
        formData.append('filelrc', inputs[4].files[0]);

        $.ajax({
            url: '/music/add-music',
            type: 'post',
            data: formData,
            dataType: 'json',
            // jq 上传文件的坑：
            // 1. 默认请求头是 application/x-www-form-urlencoded  (键值对)
            // 2. 默认会将数据序列化，转化为 key=value
            // 解决：
            contentType: false, // 1.
            processData: false, // 2.
            success: function(data) {
                if (data.code === '001') {
                    if (confirm('添加成功，去听歌?')) {
                        window.location = '/music/index';
                    }
                } else {
                    alert(data.msg);
                }
            }

        })
    })
</script>
{{ /block }}